<!--grid-->
<br>
<div class="goods-marklist">
    <div class="grid-header">
        <div class="grid-title" *ngFor="let column of columns">{{column.title}}</div>
    </div>
    <div class="grid-container">
        <div class="grid-item" *ngFor="let row of rows; let i = index" [ngClass]="{gridItemCheck: row.isChecked}">
            <div class="grid-itemInfo"><input type="checkbox" name="isChecked{{i}}" [(ngModel)]="row.isChecked"></div>
            <div class="grid-itemInfo">{{row.goodsSN}}</div>
            <div class="grid-itemInfo">{{row.goodsName}}</div>
            <div class="grid-itemInfo">{{row.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</div>
            <div class="grid-itemInfo">
                <button class="action-btn" style="margin-right: 10px;" (click)="getLabel(row.goodsGuid)">查看打标内容</button>
            </div>
            <div class="grid-itemInfo">
                <button class="action-btn" (click)="clearLabel(row.goodsGuid)">清空标签</button>
            </div>
        </div>
    </div>
    <div>    
        <button class="action-btn" (click)="checkAll()">全选</button>
        <button class="action-btn" style="margin-left: 10px;" (click)="clearSelectedLabel($event)">清除所选标签</button>
    </div>
    <pagination *ngIf="rows" class="pagination-sm" [(ngModel)]="page" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" [firstText]="localText.firstBtn" [lastText]="localText.lastBtn" [previousText]="localText.previousBtn"
        [nextText]="localText.nextBtn" (pageChanged)="onChangeTable($event)" (numPages)="numPages = $event">
    </pagination>
    <pre *ngIf="rows" class="card card-block card-header">页数: {{page}} / {{numPages}}</pre>
</div>

<!--查看、修改打标-->
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">打标内容</h4>
                <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <label class="col-md-2">WOC码：</label>
                    <div class="col-xs-12 col-md-8">{{editModel.goodsSn}}</div>
                </div>
                <div class="row">
                    <label class="col-md-2">商品名称：</label>
                    <div class="col-xs-12 col-md-8">{{editModel.goodsName}}</div>
                </div>
                <div class="row row-margin-bottom" >
                    <label class="col-md-2">标签：</label>
                    <div class="col-xs-12 col-md-8">
                        <div class="row row-margin-bottom" *ngFor="let labelRow of labelRows">
                            <p *ngIf="labelRow.labelName" class="col-md-2" style="height: 50px;">{{labelRow.labelName}}</p>
                            <img *ngIf="labelRow.labelUrl" class="col-md-2" width="50" height="50" src="{{labelRow.labelUrl}}"/>
                            <div class="col-xs-12 col-md-8">显示时间：{{labelRow.beginTime | date:'yyyy-MM-dd HH:mm:ss'}} -- {{labelRow.endTime | date:'yyyy-MM-dd HH:mm:ss'}}</div>
                            <button type="button" class="btn btn-danger btn-sm" (click)="deleteLabel(editModel.goodsGuid, labelRow.id)">删除</button>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-default" [disabled]="labelRows.length == 0" (click)="clearLabel(editModel.goodsGuid)">清空标签</button>
            </div>
        </div>
    </div>
</div>
